<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
</head>
<body>
    <div id="app">
        <p>{{ rendData() }}</p>
        <p>{{ rendData1 }}</p>
        <!-- 点击按钮就让数据text取反 -->
        <button @click=" text = !text">按钮</button>

        <p>{{ num }}</p>
        <button @click="num++">添加</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const vm= new Vue({

            data:{
                num:0,
                text:true,
            },

            methods:{
                //回调函数
                rendData(){
                    console.log("rendData()");
                    return this.text ? "AAA" : "暂无数据"
                }
            },

            //计算属性 
            computed:{
                //只读的计算属性 只有被调用的时候，才会重新计算属性
                rendData1(){
                    console.log("rendData1()");
                    return this.text ? "AAA" : "暂无数据"
                }
            }

        });
        vm.$mount("#app");
    </script>
</body>
</html>